<template>
  <w-content-box
    :class-model="classModel"
    :options="searchOptions">
    <template v-slot="scope">
      <el-row :gutter="20">
        <el-col :span="6">
          <span class="log-text">{{ scope.item.defaultTag }}</span>
        </el-col>
        <el-col :span="6">
          <span class="log-text">{{ scope.item.userName }}</span>
        </el-col>
        <el-col :span="6">
          <span class="log-text">{{ scope.item.dateStr }}</span>
        </el-col>
        <el-col :span="6">
          <span class="log-text">{{ scope.item.routerPath }}</span>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <span class="log-text">{{ scope.item.errMsg }}</span>
        </el-col>
        <el-col :span="8">
          <span class="log-text">{{ scope.item.info }}</span>
        </el-col>
        <el-col :span="8">
          <span class="log-text">{{ scope.item.domClass }}</span>
        </el-col>
        <el-col
          :span="24"
          v-if="scope.item.err">
          <span class="log-text">{{ scope.item.err }}</span>
        </el-col>
      </el-row>
      <p
        class="log-text"
        v-if="scope.item.userAgent">{{ scope.item.userAgent }}</p>
    </template>
  </w-content-box>
</template>

<script>
  import LogWebErrorModel from '@/models/logs/LogWebErrorModel'
  import WContentBox from '../../com/contentBox'

  export default {
    name: "PCAdminLogsWebError",
    components: {
      WContentBox
    },
    data() {
      return {
        /**
         * 列表加载模型
         */
        classModel: LogWebErrorModel,
        searchOptions: [
          {
            title: 'info',
            key: '信息'
          }, {
            title: 'dom class',
            key: 'domClass'
          },  {
            title: '用户名',
            key: 'userName'
          }, {
            title: '默认标记',
            key: 'defaultTag'
          }, {
            title: '设备型号',
            key: 'userAgent'
          }, {
            title: '路由Path',
            key: 'routerPath'
          }
        ]
      }
    },
    created() {
      this.asd.asd
    }
  }
</script>

<style lang="scss" scoped>
  .pc-admin-logs-web-error {
    .table-view {
      list-style: none;
      margin: 0;
      padding: 0;
      .cell {
        padding: 5px 10px;
        border-radius: 4px;
        background-color: #efefef;
        margin-bottom: 10px;
        .title, .router-item, .user-agent {
          margin: 0;
          color: #999;
          font-size: 14px;
          line-height: 20px;
        }
        .success.error {
          color: #BF360C;
        }
      }
    }
  }
</style>
